<!-- <template>
  <div class="pagination-container">
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-size="limit"
      :total="total"
      layout="total, prev, pager, next, jumper"
      :page-sizes="[10, 20, 50, 100]"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: {
    total: {
      type: Number,
      required: true,
    },
    page: {
      type: Number,
      required: true,
    },
    limit: {
      type: Number,
      required: true,
    },
  },
  methods: {
    handleCurrentChange(newPage) {
      this.$emit('update:page', newPage);
    },
    handleSizeChange(newSize) {
      this.$emit('update:limit', newSize);
    }
  }
};
</script>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style> -->



<template>
  <div class="pagination-container">
    <el-pagination :page-sizes="[10, 20, 50, 100]" size="default" :background="true"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
    <!-- <el-pagination @current-change="handleCurrentChange" :current-page="page" :page-size="limit" :total="total"
      layout="total, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" /> -->
  </div>
</template>

<script setup lang="ts">


defineProps({
  total: {
    type: Number,
    required: true,
    default: 10,
  },
  page: {
    type: Number,
    required: true,
  },
  limit: {
    type: Number,
    required: true,
  },
});

const emits = defineEmits(['update:page', 'update:limit']);


const handleCurrentChange = (newPage: number) => {
  emits('update:page', newPage);
};
const handleSizeChange = (newSize: number) => {  
  emits('update:limit', newSize);
};

</script>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: end;
  margin-top: 20px;
}
</style>
